【第1473期】用代码做设计

前言

不融入参与可能就只是旁观者了。今日早读文章由Teambition@屠家樑翻译分享。

正文从这开始～～

我们正处于设计工具复兴的中期，在 Sketch 1.0 发布后的八年里，它已经和传统的设计工具形成了一波竞争浪潮，随着设计师可用工具快速增加，一些曾经边缘化的理念将会面向更多的受众。

其中有一个数字产品设计的理念将会显著改变：深度整合设计和代码。如今的工具中，Figma 可以实时更新 React 代码，InVision、Abstract 和 Zeplin 解决了设计到开发的交付问题，Framer X 可以直接在工作区渲染可交互的 React 组件，这些都是未来趋势的一些迹象。

和我一样喜欢写代码的设计师能够意识到，这场革命是必然会到来的，我自己的工作方式已经被我的 CSS、HTML 和 Javascript 知识影响。然而对于我和其他很多设计师来说，设计依然是先于代码的，极少情况（如果有）下它们会反过来。

最近我有了一些机会去使用代码进行设计，在《华尔街日报》较大的两个项目中，编写代码带给我一些新的想法，一些在设计早期会碰到的如「使用真实数据看起来的效果」之类的问题会很容易解决。直接使用代码探索视觉创意，让我意识到代码作为设计工具的惊人潜力。

案例 1：《华尔街日报》杂志在线版

我在 2017 年 8 月加入《华尔街日报》，接手的第一个项目是重新设计《华尔街日报》杂志的首页。

《华尔街日报》杂志是一档时尚、艺术和生活方式的付费杂志，有着一流的内容：电影和电视明星的定期专栏，时尚、艺术、潮流饮食与文化领域的名人报道。此次重新设计之前，该杂志还未推出在线版本。

传统的设计方式

我在 Sketch 中实现最初的想法，用鼠标画出填充了文字和图片的矩形，在 Sketch 中要做到像素级别的精确很容易并且也有必要，对此我进行了不计其数的微小调整，我会在意 10 像素作为间距是否太大，14 点的字用于署名是否太小，我做所有设计师该做的事。

《华尔街日报》主页改版的第一次尝试结果

我将这些矩形内容填满整页，所有元素都按网格排列，我习惯性地选择了我认为合适的照片和标题排布方式，而忽略了跳出于此平衡去尝试。

设计过程中，我的设计总是被束缚于矩形之中

这种设计方式对于任何使用过 Sketch、Adobe Illustrator、Photoshop 或者如 Invision Studio、Framer 这类新产品的人来说都应该很熟悉，这就是当前设计方式的现状。

打破网格

某个周末，我觉得如果用代码将我的设计想法做成原型会很有趣（事实确实如此）。在 Sketch 中建立的 Symbol 系统会在大内容量下变的越来越慢，我认为这在浏览器中应该会表现的更好，而且我一直想尝试新的 CSS 网格，并加强我对 Flexbox 的使用经验。

不是很完美但最终很独特的原型

当我再次打开这个项目时，我惊讶地发现页面在未完成的状态下看起来很不错，而如果我用传统的设计视角来看待它时，与 Sketch 中的设计不一致，会让它看起来像是未完成的内容。

页面中内容没有严格的网格划分，元素周围有不对称和不正常的留白，一条不规则的边缘引导着我的视线，并且如果我花更多时间在代码上，又可以尝试更多的方式。最后，我没有在 Sketch 中继续调整像素，而是从浏览器中截屏，将其粘贴回 Sketch 中。

我没有让内容填满所有的可用空间，而是让图片按原始分辨率显示

意外惊喜

由于缺乏经验，我忽略了设置媒体查询来指示页面应该如何适应小屏幕。结果内容溢出了浏览器的边缘，用户需要在页面上滑动来查看更多内容。

滚动以查看溢出内容

这次「意外」让人感到兴奋和新奇，在 Sketch 中，我使用的是无限大的静态画布，所以不会出现溢出现象，所有东西总是固定位置，在小屏幕设备上，滑动是一种愉悦的导航形式（在此感谢 Tinder），尤其是在内容明显需要超出框架的情况下。如果没有在我手机浏览器中看到这种情况，我可能从来都不会想过要尝试一下。

案例 2：《华尔街日报》的新主页

WSJ.com 的主页是《华尔街日报》在线产品中最重要的部分之一，不夸张的说，平均每个月《华尔街日报》的网站首页会被数以百万计的人浏览数千万次。在 2018 年夏天，我开始重构 WSJ.com 主页的设计语言，虽然这让我感到无从下手。

在对工作进行评估时，我意识到其中一个组件——带有文章链接的卡片，占了页面的 80% 的空间。对此，我开始创建一套简单、灵活的卡片系统，以统一主页上的大部分的内容。

卡片的由来

目前的 WSJ.com 主页制作于 2014 年，在这个项目中，当时工程团队决定冒险使用Facebook 的一项名为 React 的新技术。用 React 构建意味着组件的高度可配置，内容可以根据变量以各种方式显示。

当前主页中的一个卡片

随着新的卡片组件的设计和开发，它们被命名和分类，「LS-LEAD」被「LS-LEAD-NO-IMAGE」和「LS-LEAD-ALT」继承，像「SPOTLIGHT-SEVEN」这样的布局就是用这些组件构建的。

SPOTLIGHT-SEVEN 页面布局

随着卡片上层级的增加，低级别的一些信息如标题大小、媒体位置、时间戳和相关内容会被抽象出来以利于不同尺寸图片的展示。此时，已经可以通过更新某个值就对页面布局进行全局改动。

推倒重来

设计期间我再次意识到一个 Sketch 的限制，在准备用户测试时，我花了太多的时间来复制和粘贴内容，而我希望的仅是制作一个报道列表，让页面承载它，并且做尽可能少的手动调整。

因此在一个周末，我从零开始制作了一个看着有些低效的程序，用 HTML 和 CSS 来渲染 WSJ 主页。

用新的卡片组件系统更新的主页

在写这个程序时，我开放了各个卡片的低级别配置，通过调整配置来得到样式，这个过程因为有不确定性而变的很有趣，当然这些在追求像素精确为目的的 Sketch 中自然是无法做到的。

我可以像这样往组件中传入一些参数：

{
 "headline": {
   "size": "l"
 },
 "byline": false,
 "media": false,
 "bullets": false
}

然后得到一张看起来这样的卡片：

一个有标准标题没有图片的卡片变体

如果我稍微改变下这些参数，我又可以在 60 秒内获得出完全不同的卡片：

带有居中标题和图标的卡片变体

乘法设计

在我的简单原型中，每个文章卡片有 26 个可配置项，这意味着，对于每个报道，都有超过 100 万种可能的卡片类型，在 Sketch 中这将是一个难以维护的噩梦。

上百万中可能的变体中的十种

但是在代码中，这个组件大约是 300 行 HTML 和 CSS 代码，以及少量的 NodeJS 代码用来将 WSJ.com 主页的实时数据填入卡片，我们可以对组件稍作修改便可看到全局性的变化。做乘法设计意味着做一个修改便可有全局性的输出，这样能让我的设计变得更缜密。

总结

这些新的设计软件的出现，对于设计师来说意味着代码将成为操作这些工具的核心，但是没必要等待 Framer X 的邀请或其他任何新的 Beta 版本的软件，你现在就可以使用代码作为设计工具进行设计，以下是一些关于学习建议：

• Wes Bos 有一些很棒的关于 CSS 和 Javascript 的课程，包括关于 React 和 Node 的介绍。他的课程会围绕一些有趣的项目展开，教学风格非常有意思。

• Daniel Schiffman 有很多关于创意艺术编程的视频。他的教学方式是从问题出发并找出解决方案，这更让人有沉浸感并感到非常自然。

• Codecademy 有非常深入的交互式课程，我偶尔会做一些关于 Javascript 的练习用来复习。

Twitter 上还有一个充满活力的工程师和设计师社区，他们激励我使用代码作为设计工具。如果你想将代码运用于设计

关于本文
译者：@屠家樑
译文：https://zhuanlan.zhihu.com/p/50414690
作者：@Matthew Ström
原文：https://matthewstrom.com/writing/designing-with-code.html

最后，为你推荐